<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>课程列表 - 数据库教学系统</title>
  <link rel="stylesheet" href="/src/style.css">
  <link rel="stylesheet" href="/node_modules/@fortawesome/fontawesome-free/css/all.min.css">
</head>
<body class="bg-gray-50">
  <div class="min-h-screen flex">
    <!-- 侧边栏 -->
    <aside class="w-64 bg-white shadow-md">
      <div class="p-4 border-b border-gray-200">
        <h2 class="text-xl font-bold text-gray-800">数据库教学系统</h2>
      </div>
      <nav class="p-4 space-y-2">
        <a href="/dashboard.html" class="nav-item flex items-center">
          <i class="fas fa-home mr-3"></i>仪表盘
        </a>
        <a href="/courses.html" class="nav-item active flex items-center">
          <i class="fas fa-book mr-3"></i>课程列表
        </a>
        <a href="/lab.html" class="nav-item flex items-center">
          <i class="fas fa-flask mr-3"></i>实验环境
        </a>
        <a href="/assignments.html" class="nav-item flex items-center">
          <i class="fas fa-tasks mr-3"></i>作业管理
        </a>
        <a href="/profile.html" class="nav-item flex items-center">
          <i class="fas fa-user mr-3"></i>个人资料
        </a>
      </nav>
    </aside>

    <!-- 主要内容区 -->
    <main class="flex-1 p-8">
      <div class="flex justify-between items-center mb-8">
        <h1 class="text-2xl font-bold text-gray-800">课程列表</h1>
        <button class="btn btn-primary">
          <i class="fas fa-plus mr-2"></i>创建新课程
        </button>
      </div>

      <!-- 课程筛选 -->
      <div class="card mb-8">
        <div class="flex flex-wrap gap-4">
          <div class="flex-1 min-w-[200px]">
            <label class="block text-sm font-medium text-gray-700 mb-1">学期</label>
            <select class="input">
              <option>2023-2024学年第一学期</option>
              <option>2022-2023学年第二学期</option>
              <option>2022-2023学年第一学期</option>
            </select>
          </div>
          <div class="flex-1 min-w-[200px]">
            <label class="block text-sm font-medium text-gray-700 mb-1">状态</label>
            <select class="input">
              <option>全部状态</option>
              <option>进行中</option>
              <option>已结束</option>
              <option>未开始</option>
            </select>
          </div>
          <div class="flex-1 min-w-[200px]">
            <label class="block text-sm font-medium text-gray-700 mb-1">搜索</label>
            <div class="relative">
              <input type="text" class="input pl-10" placeholder="搜索课程名称">
              <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-500">
                <i class="fas fa-search"></i>
              </span>
            </div>
          </div>
        </div>
      </div>

      <!-- 课程列表 -->
      <div class="card">
        <div class="table-container">
          <table class="table">
            <thead>
              <tr>
                <th>课程名称</th>
                <th>课程代码</th>
                <th>学期</th>
                <th>学生数</th>
                <th>状态</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody class="divide-y divide-gray-200">
              <tr>
                <td class="flex items-center space-x-3">
                  <img src="https://images.unsplash.com/photo-1516259762381-22954d7d3ad2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&h=100&q=80" 
                       alt="课程封面" 
                       class="w-10 h-10 rounded-lg object-cover">
                  <div>
                    <div class="font-medium">数据库原理</div>
                    <div class="text-sm text-gray-500">周二 8:00-9:40</div>
                  </div>
                </td>
                <td>DB101</td>
                <td>2023-2024-1</td>
                <td>65</td>
                <td>
                  <span class="px-2 py-1 text-sm rounded-full bg-green-100 text-success">进行中</span>
                </td>
                <td>
                  <div class="flex space-x-2">
                    <button class="btn bg-blue-50 text-primary hover:bg-blue-100">
                      <i class="fas fa-edit"></i>
                    </button>
                    <button class="btn bg-red-50 text-danger hover:bg-red-100">
                      <i class="fas fa-trash"></i>
                    </button>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="flex items-center space-x-3">
                  <img src="https://images.unsplash.com/photo-1555949963-ff9fe0c870eb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&h=100&q=80" 
                       alt="课程封面" 
                       class="w-10 h-10 rounded-lg object-cover">
                  <div>
                    <div class="font-medium">数据库设计</div>
                    <div class="text-sm text-gray-500">周四 10:00-11:40</div>
                  </div>
                </td>
                <td>DB201</td>
                <td>2023-2024-1</td>
                <td>48</td>
                <td>
                  <span class="px-2 py-1 text-sm rounded-full bg-green-100 text-success">进行中</span>
                </td>
                <td>
                  <div class="flex space-x-2">
                    <button class="btn bg-blue-50 text-primary hover:bg-blue-100">
                      <i class="fas fa-edit"></i>
                    </button>
                    <button class="btn bg-red-50 text-danger hover:bg-red-100">
                      <i class="fas fa-trash"></i>
                    </button>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="flex items-center space-x-3">
                  <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&h=100&q=80" 
                       alt="课程封面" 
                       class="w-10 h-10 rounded-lg object-cover">
                  <div>
                    <div class="font-medium">SQL优化</div>
                    <div class="text-sm text-gray-500">周五 14:00-15:40</div>
                  </div>
                </td>
                <td>DB301</td>
                <td>2023-2024-1</td>
                <td>35</td>
                <td>
                  <span class="px-2 py-1 text-sm rounded-full bg-yellow-100 text-warning">未开始</span>
                </td>
                <td>
                  <div class="flex space-x-2">
                    <button class="btn bg-blue-50 text-primary hover:bg-blue-100">
                      <i class="fas fa-edit"></i>
                    </button>
                    <button class="btn bg-red-50 text-danger hover:bg-red-100">
                      <i class="fas fa-trash"></i>
                    </button>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <!-- 分页 -->
        <div class="flex items-center justify-between mt-4">
          <div class="text-sm text-gray-700">
            显示 1 到 3，共 3 条记录
          </div>
          <div class="flex space-x-2">
            <button class="btn bg-gray-100 text-gray-700 hover:bg-gray-200" disabled>
              <i class="fas fa-chevron-left"></i>
            </button>
            <button class="btn bg-primary text-white hover:bg-blue-600">1</button>
            <button class="btn bg-gray-100 text-gray-700 hover:bg-gray-200" disabled>
              <i class="fas fa-chevron-right"></i>
            </button>
          </div>
        </div>
      </div>
    </main>
  </div>
</body>
</html>